<template>
	<!-- 主要布局页面 -->
	<div>
		<el-container style="height: 600px; border: 1px solid #eee">
			<el-aside width="200px" style="border: 2px #eee solid;">
				<el-input placeholder="请输入要查询的商品" v-model="filterText">
				</el-input>
				<el-tree :data="goodsTypeData" :props="defaultProps" 
					accordion @node-click="selGoodsType">
				</el-tree>
			</el-aside>
			<el-main>
				<div>
					<!-- 功能显示区域 -->
					<el-button type="primary" style="margin-left: 5px;" 
						@click="openAddGoods()">新增<i class="el-icon-plus"></i></el-button>
					<el-button type="primary" style="margin-left: 5px;" 
						@click="updateGoods()">修改<i class="el-icon-edit"></i></el-button>
					<el-button type="danger" style="margin-right: 5px;" 
						@click="deleteGoods()">删除<i class="el-icon-delete"></i></el-button>
				</div>
				<div style="margin-top: 10px;">
					<!-- 数据显示区域 -->
					<el-table :data="goodsData" style="width: 100%" border>
						<el-table-column type="selection" width="55">
						</el-table-column>
						<el-table-column prop="code" label="商品编码">
						</el-table-column>
						<el-table-column prop="name" label="商品名称">
						</el-table-column>
						<el-table-column prop="model" label="型号">
						</el-table-column>
						<el-table-column prop="unit" label="单位">
						</el-table-column>
						<el-table-column prop="purchasingPrice" label="采购价">
						</el-table-column>
						<el-table-column prop="sellingPrice" label="出售价">
						</el-table-column>
						<el-table-column prop="minNum" label="库存下线">
						</el-table-column>
						<el-table-column prop="producer" label="producer">
						</el-table-column>
					</el-table>
				</div>
			</el-main>
		</el-container>
		<!-- 弹框树状结构图 -->
		<el-dialog title="请选择商品类型" :visible.sync="a">
			<!-- 不能公用一个树状结构，需要重新修改 -->
			<el-tree :data="goodsTypeData" :props="defaultProps"
				accordion @node-click="selGoodsTypeByAdd">
			</el-tree>
			 <div slot="footer" class="dialog-footer">
			    <el-button @click="a = false">取 消</el-button>
			    <el-button type="primary" @click="a = false">确 定</el-button>
			  </div>
		</el-dialog>	
		<!-- 新增物品逻辑 -->
		<el-dialog title="新增商品" :visible.sync="addGoodsDialog">
		  <el-form :model="goodsObj" :inline="true">
		    <el-form-item label="商品分类">
				<el-input
				      class="inline-input"
				      v-model="goodsObj.typeName"
				      @focus="openGoodsType()"
				      placeholder="请输入内容"></el-input>
		    </el-form-item>
			<el-form-item label="商品编号">
			  <el-input v-model="goodsObj.code" autocomplete="off" readonly></el-input>
			</el-form-item>
			<br>
			<el-form-item label="商品名称">
			  <el-input v-model="goodsObj.name" autocomplete="off"></el-input>
			</el-form-item>
			<br>
			<el-form-item label="商品型号">
			  <el-input v-model="goodsObj.model" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="商品单位">
				<el-select v-model="goodsObj.unit">
					 <el-option :label="goodsUnit.name" :value="goodsUnit.name"  
					 v-for="(goodsUnit,index) in goodsUnitList" :key="index"></el-option>
				</el-select>
			</el-form-item>
			<br>
			<el-form-item label="采购售价:">
			  <el-input v-model="goodsObj.purchasingPrice"></el-input>
			</el-form-item>
			<el-form-item label="销售售价:">
			  <el-input v-model="goodsObj.sellingPrice"></el-input>
			</el-form-item>
			<br>
			<el-form-item label="生产厂商:">
			  <el-input v-model="goodsObj.producer"></el-input>
			</el-form-item>
			<el-form-item label="库存下线:">
			  <el-input v-model="goodsObj.minNum"></el-input>
			</el-form-item>
			<el-form-item label="备注">
			  <el-input type="textarea" v-model="goodsObj.remarks" style="width: 500px;height: 80px;"></el-input>
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="addGoodsDialog = false">取 消</el-button>
		    <el-button type="primary" @click="insertGoodsToDB">确 定</el-button>
		  </div>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				filterText: '',
				goodsTypeData: [{
          label: 'name1',
          children: [{
            label: 'name2',
            children: [{
              label: 'name3'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
				goodsData: [],
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				//新增商品逻辑操作-----
				addGoodsDialog:false,
				goodsObj:{
					//类别
					typeId:"",
					code:"", //提前生成唯一的
					name:"",
					model:"", //型号
					typeName:'' ,//类型对应的名称
					purchasingPrice:"",
					sellingPrice:"",
					producer:"",
					minNum:"" //库存下线
				},
				a:false,
				goodsUnitList:[],
			}
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			}
		},
		methods: {
			//保存商品进入数据库
			insertGoodsToDB(){
				this.postRequest("/goods/save",this.goodsObj).then(resp=>{
					if(resp){
						//关闭对话框，应该需要刷新，暂时刷新数据了
						this.addGoodsDialog=false;
					}
				})
			},
			// 打开保存对话框
			openAddGoods(){
				this.addGoodsDialog=true;
				//数据填充，填充类别和单位，类别是树形结构，单位是下拉列表框
				//获取系统中的商品单位
				this.postRequest("/goods/goodsUnitList").then(resp=>{
					if(resp){
						this.goodsUnitList = resp.data.goodsUnit;
						this.goodsObj.code=resp.data.code;
					}
				})
			},
			handleSelect(){
				console.log("-----触发选中-------");
			},
			filterNode(value, data) {
				console.log(data);
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			initGoods() {
				console.log("初始化商品类型数据");
				this.postRequest("/goodstype/likeQuery").then(res => {
					if (res) {
						this.goodsTypeData = res.data.typesList;
						this.goodsData = res.data.goodsList;
					}
				})
			},
			openGoodsType(){
				console.log("选中状态！");
				this.a=true;
				console.log("helloworld====");
			},
			selGoodsTypeByAdd(data){
				const state = data.state;
				if(state!=0){
					alert("请选择对应的子节点");
				}else{
					this.goodsObj.typeName=data.name;
					this.goodsObj.typeId=data.id;
				}
			},
			selGoodsType(data) {
				const state = data.state;
				if(state==0){
					//属于子节点
					this.postRequest("/goods/selectTypeOfTier/"+data.pid).then(res=>{
						if(res){
							this.goodsData=[];
							this.goodsData=res.data.goodstypeList;
							console.log("数据清除");
						}
					})
				}
			}
		},
		mounted() {
			this.initGoods();
		}

	}
</script>

<style>
</style>